<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="headBar">
			<view class="navBack" @click="goBack()">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
			<view class="title">
				云仓
			</view>
		</view>


		<!-- 顶部渐变 -->
		<view class="linerBack">

		</view>


		<!-- 云仓顶部信息 -->
		<view class="info_Content">
			<view class="personInfo">

				<view class="portrait">
					<image :src="wxUserInfo.wxUserAvatar" mode="aspectFill"></image>
				</view>

				<view class="nameAndStatus">
					<view class="name">
						{{wxUserInfo.wxUsername}}
					</view>
					<view :class="wxUserInfo.wxUserStatus==1?'cloud':'district'">
						{{wxUserInfo.wxUserStatus==1?'云集服务商':'区县级服务商'}}
					</view>
				</view>

			</view>
			<view class="storeNum">
				<view class="numContent">
					<view class="num">
						{{cloudWarehouseAllStock}}
					</view>
					<text>件</text>
				</view>
				<view class="desc">
					云仓库存量
				</view>
			</view>
		</view>

		<!-- 查询提货和补货记录等 -->
		<view class="goodsOperate">
			<view class="operateItem" @click="toserviceOrderPage(0)">
				<view class="iconContent deliverRecord">

				</view>
				<view class="textDesc">
					提货记录
				</view>
			</view>

			<view class="operateItem" @click="toserviceOrderPage(1)">
				<view class="iconContent replenRecord">

				</view>
				<view class="textDesc">
					补货记录
				</view>
			</view>
			<view class="operateItem" @click="toSetPage()">
				<view class="iconContent  replenCenter">

				</view>
				<view class="textDesc">
					补货中心
				</view>
			</view>
		</view>


		<!-- 无商品提示文字 -->
		<view class="empty" v-if="cloudWareList.length===0">
			<view class="text">
				您的云仓空空如也
			</view>
			<view class="text">
				快去逛逛吧
			</view>
		</view>

		<view class="goodPurchaseArea">
			<!-- 商品列表 -->
			<view class="goodsList" v-if="cloudWareList.length!=0&&isOpenList===false">
				<view class="goodItem" v-for="item in cloudWareList">
					<view class="goodImage">
						<image :src="item.productImg" mode="aspectFill"></image>
					</view>
					<view class="goodDesc">
						<view class="goodName">
							{{item.productName}}
						</view>

						<view class="discount">
							库存:{{item.cloudWarehouseAllStock}}
						</view>
						<view class="priceAndNum">
							<!-- 价格区域 -->
							<view class="price">
								<view class="nowPrice">
									￥{{caluateDiscount(item.productPrice)}}
								</view>

								<view class="prePrice">
									￥{{item.productPrice}}
								</view>


							</view>
							<!-- 进步器区域 -->
							<view class="steeper">
								<view class="goodsQuantity" v-if="isInSelected(item.backupProductId)">
									{{isInSelected(item.backupProductId)}}
								</view>

								<view class="specitionSelect"
									@tap="openGaugeCard(item.backupProductId,item.productName)">
									规格选择
								</view>
							</view>

						</view>


					</view>
				</view>

			</view>


			<!-- 提货清单 -->
			<view class="replishListArea" v-if="isOpenList">
				<view class="title">
					进货清单明细
				</view>
				<view class="delete" @click="clearList()">
					<view class="icon">

					</view>
					<view class="textDesc">
						清空
					</view>
				</view>

				<view class="empty" v-if="selectedList.length===0">
					<view class="text">
						暂未添加任何商品
					</view>
					<view class="text">
						快去选购吧
					</view>
				</view>

				<view class="replishList">
					<view class="goodItem" v-for="subItem in  selectedList">
						<view class="goodImage">
							<image :src="subItem.productDetailImg" mode="aspectFill"></image>
						</view>
						<view class="goodDesc">
							<view class="goodName">
								{{subItem.productName}}
							</view>

							<view class="discount">
								{{subItem.productDetailSpecifications}}
							</view>

							<view class="priceAndNum">
								<!-- 价格区域 -->
								<view class="price">
									<view class="nowPrice">
										￥{{ caluateDiscount(subItem.productDetailPrice)}}
									</view>

									<view class="prePrice">
										￥{{subItem.productDetailPrice}}
									</view>


								</view>
								<!-- 进步器区域 -->
								<view class="steeper">
									<steeper :toZero="true" :limitStock="subItem.cloudWarehouseStock"
										:itemNum="subItem.quantity" @add="num=>toAdd(num,subItem.id)"
										@minus="num=>toMinus(num,subItem.id)" @blur="num=>toBlur(num,subItem.id)">
									</steeper>

								</view>

							</view>

						</view>
					</view>

				</view>


			</view>


			<!-- 底部的提交订单 -->
			<view class="orderFooter">
				<view class="title" @click="operateList()">
					提货清单
					<view class="icon" :class="isOpenList==false?'up':'down'">

					</view>
				</view>
				<view class="totalPrice">
					￥{{ caluateDiscount(totalPrice)}}
				</view>




				<view class="confirmButton" @click="toOrderConfirm()">
					提交订单
				</view>
			</view>


		</view>


		<!-- 商品的规格卡片 -->
		<view class="specificCard" v-if="isPopUp">
			<view class="goodName">
				{{productName}}
			</view>

			<!-- 规格按钮组 -->
			<view class="specifiBox">
				<view class="title">
					规格
				</view>
				<view class="speciBtns">
					<view class="btnItem" @click="changeSubItem(subInfo.id)"
						:class="subInfo.id===selectedSubItem.id? 'selected':'unSelected' "
						v-for="subInfo in subProductList">
						<view class="specDesc">
							{{subInfo.productDetailSpecifications}}
						</view>

						<view class="specPrice">
							￥{{caluateDiscount( subInfo.productDetailPrice)}}
						</view>
					</view>
				</view>
			</view>

			<view class="footOperate">
				<view class="totalPrice">
					<view class="title">
						小计
					</view>
					<view class="Price">
						￥{{caluateDiscount(selectedSubItem.productDetailPrice)}}
					</view>
				</view>
				<view  v-for="sub in subProductList" v-if="(sub.id===selectedSubItem.id)">
					<steeper :toZero="true"  
					v-if="getSeleItemNum(selectedSubItem.id)&&(sub.id===selectedSubItem.id)"  :itemNum="selectedSubItem.quantity"
					 :limitStock="selectedSubItem.cloudWarehouseStock"
					  @add="num=>toAdd(num,selectedSubItem.id)"
						@minus="num=>toMinus(num,selectedSubItem.id)" @blur="num=>toBlur(num,selectedSubItem.id)">
					</steeper>
					<view class="addToList" v-else @click="addToSelectedList()">
						加入进货清单
					</view>
				</view>
				
			</view>
		</view>


		<!-- 蒙层 -->
		<view @click="closeSpecCard()">
			<popMask :isShow="isPopUp"></popMask>
		</view>

		<view @click="closeSpecCard()">
			<popMask :isShow="isOpenList"></popMask>
		</view>

	</view>
</template>

<script>
	import * as cloudStoreApi from '@/api/cloudStore/cloudStore.js'
	import popMask from '@/components/popMask.vue'
	import steeper from '@/components/stepper.vue'
	let num=1;
	export default {
		components: {
			popMask,
			steeper
		},
		data() {
			return {
				cloudWarehouseAllStock: 0,

				wxUserInfo: {
					wxUserAvatar: '/static/home/蒙版分组.png',
					wxUsername: '点击登录',
					wxUserStatus: ''
				},
				//云仓信息
				cloudWareList: [],
				//用来控制提货清单
				isOpenList: false,
				//已选购商品列表
				selectedList: [],
				//子商品相关的变量
				subProductList: [],
				// 与添加到补货清单的子商品
				selectedSubItem: {

				},
				// 商品卡片上展示的主商品名字
				productName: '',
				//为了用主商品id进行分组，给selected新增的字段
				backupProductId: null,
				totalPrice: 0,
				// 控制蒙层
				isPopUp: false,


			};
		},
		computed: {
			goodsNum() {
				return this.cloudWareList.length || 0
			},
			
			
		},
		
		
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.wxUserInfo = receivedParams.wxUserInfo;
				
			}

			this.getCloudWareList();
		},
		onShow() {
			this.resetData();
			this.getCloudWareList();
			
			
		},
		methods: {
			resetData() {
				const wxUserInfo = this.wxUserInfo; // Save the current value of imgStatus
				Object.assign(this.$data, this.$options.data.call(this));
				this.wxUserInfo = wxUserInfo; // Reassign the saved value of imgStatus
			},
			
			
			goBack() {
				uni.$goBack();
			},
			// 根据传入的id返回对应已经选择商品的数量
			getSeleItemNum(id) {
				const item = Object.values(this.selectedList).find(obj => obj.id === id);
				return item ? item.quantity : false;
			},
			//根据服务商类型进行打折
			caluateDiscount(price) {
				
				if (this.$globalData.userType !== null) {
				
					if (this.$globalData.userType === 1) {
						return (0.5 * price).toFixed(2)
					} else {
						
						return (0.4 * price).toFixed(2)
					}
				}
			},

			async getCloudWareList() {
				const res = await cloudStoreApi.selectCloudWarehouseListByUserId();
				if (res.data.code === 200) {
					this.cloudWareList = res.data.data;
					this.cloudWarehouseAllStock=this.cloudWareList.reduce((sum,item)=>{
						return item.cloudWarehouseAllStock+sum;
					},0)
				} else return uni.$showMsg('获取云仓信息失败')
				
			},
			operateList() {
				this.isOpenList = !this.isOpenList;
			},



			//跳转订单中心
			//根据传递的不同flag到不同的页面
			toserviceOrderPage(flag) {
				uni.$toPage('/subpkg/ServiceProvider/serviceOrderRecord/serviceOrderRecord', {
					flag: flag
				});

			},

			//跳转补货中心
			toSetPage() {
				uni.$toPage('/subpkg/ServiceProvider/replenishmentPage/replenishmentPage');
			},

			//打开规格卡片
			async openGaugeCard(id, productName) {
				
				this.isOpenList = false;
				this.productName = productName;
				this.backupProductId = id;

				// 在 cloudWareList 中查找匹配的产品
				const matchedProduct = this.cloudWareList.find(product => product.backupProductId === id);

				if (matchedProduct) {
					// 如果找到匹配的产品，将其 cloudWarehouseProductDetailVoList 属性赋值给 subProductList
					this.subProductList = matchedProduct.cloudWarehouseProductDetailVoList;
					this.selectedSubItem = this.subProductList[0];
					this.selectedSubItem.productName = this.productName;
					this.selectedSubItem.backupProductId = this.backupProductId;
					if(this.getSeleItemNum(this.selectedSubItem.id)!==false){
						this.selectedSubItem.quantity=this.getSeleItemNum(this.selectedSubItem.id);
					}else{
						this.selectedSubItem.quantity = 1;
					}
					
				} else {
					// 如果没有找到匹配的产品，可能需要处理这种情况
				
					this.subProductList = [];
				}

				this.isPopUp = true;
			},

			//关闭规格卡片
			closeSpecCard() {
				this.isPopUp = false;
				this.isOpenList = false;
			},

			//改变选择的子商品
			changeSubItem(id) {
				this.selectedSubItem = this.subProductList.find(subItem => {
					return subItem.id === id;
				});
				this.selectedSubItem.productName = this.productName;
				this.selectedSubItem.backupProductId = this.backupProductId;
				if(this.getSeleItemNum(this.selectedSubItem.id)!==false){
					this.selectedSubItem.quantity=this.getSeleItemNum(this.selectedSubItem.id);
				}else{
					this.selectedSubItem.quantity = 1;
				}
			},

			//把选择的子商品信息添加到补货清单
			addToSelectedList() {
				// 遍历 selectedList 检查是否已存在相同 id 的子商品
				const existingItemIndex = this.selectedList.findIndex(item => item.id === this.selectedSubItem.id);

				if (existingItemIndex !== -1) {
					return uni.$showMsg('已添加过该商品')
				} else {
					// 不存在相同 id 的子商品，将 subInfo 添加到 selectedList

					this.selectedList.push(JSON.parse(JSON.stringify(this.selectedSubItem)));
					this.getSelectedTotalPrice()
					return uni.$showMsg('添加成功')
				}

			},
			// 显示目前已经添加的商品数量
			isInSelected(backupProductId) {
				// 使用 reduce 方法累加所有匹配项的 quantity
				const totalQuantity = this.selectedList.reduce((sum, item) => {
					// 确保 quantity 是数字类型
					return item.backupProductId === backupProductId ? sum + Number(item.quantity) : sum;
				}, 0);

				// 如果累加的数量大于 0，则返回总量，否则返回 false
				return totalQuantity > 0 ? totalQuantity : false;
			},

			//计算商品总价
			getSelectedTotalPrice() {
				this.totalPrice = this.selectedList.reduce((total, item) => {
					// 计算每个子商品的价格，productDetailPrice * quantity
					const itemTotal = item.productDetailPrice * item.quantity;
					// 累加到总和上
					return total + itemTotal;
				}, 0); // 初始总和为 0
			},
			// 在补货清单对子商品的数量进行加减
			toAdd(num, id) {
				this.selectedList.forEach(item => {
					if (item.id === id) {
						
						item.quantity = num;
					}
				});
				this.getSelectedTotalPrice()

			},


			toMinus(num, id) {
				this.selectedList.forEach((item, index) => {
					if (item.id === id) {
						
						if (num === 0) {
							// 如果 num 等于 1，则从 selectedList 中删除对应的 item
							this.selectedList.splice(index, 1);
						} else {
							// 否则更新 item 的 quantity
							item.quantity = num;
						}
					}
				});
				this.getSelectedTotalPrice();
			},

			toBlur(num, id) {
				this.selectedList.forEach((item, index) => {
					if (item.id === id) {

						if (num === '0') {

							// 如果 num 等于 1，则从 selectedList 中删除对应的 item
							this.selectedList.splice(index, 1);
						} else {
							// 否则更新 item 的 quantity
							item.quantity = num;
						}
					}
				});
				this.getSelectedTotalPrice();
			},

			// 打开补货清单
			operateList() {
				this.isOpenList = !this.isOpenList;
				this.isPopUp=false;

			},
			clearList() {
				
				if (this.selectedList != null || this.selectedList.length != 0) {
					this.selectedList = [];
					this.getSelectedTotalPrice()

				} else return;
			},
			//提交订单到确认订单页面
			toOrderConfirm() {
				if (this.selectedList.length === 0) {
					return uni.$showMsg('请选择商品')
				}

				uni.$toPage('/subpkg/ServiceProvider/pickUpOrderConfirm/pickUpOrderConfirm', {
					selectedList: this.selectedList,
					totalPrice: this.totalPrice
				})
			},





		}
	}
</script>

<style lang="scss">
	.container {
		margin: 0;
		padding: 0;
		margin-top: 172rpx;
		width: 100vw;
		overflow-y: scroll;
		overflow-x: hidden;

		.headBar {
			position: absolute;
			width: 100vw;
			box-sizing: border-box;
			

			.title {
				position: absolute;
				left: 350rpx;
				bottom: 15rpx;
			}

			.navBack {
				z-index: 99999999;
				position: absolute;
				left: 20rpx;
				bottom: 10rpx;
				width: 58rpx;
				height: 58rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}

		}


		//顶部渐变
		.linerBack {
			
			z-index: 9999;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			opacity: 1;
			background: linear-gradient(125.77deg, rgba(212, 187, 157, 0.41) 0%, rgba(255, 255, 255, 0) 100%);
			filter: blur(200rpx);
		}


		// 顶部信息展示区域
		.info_Content {

			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			z-index: 99999;
			overflow-x: hidden;

			.personInfo {
				display: flex;
				align-items: center;

				.portrait {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					z-index: 9999;

					image {
						z-index: 99999;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.nameAndStatus {
					z-index: 9999;
					margin-left: 40rpx;

					.name {
						font-size: 40rpx;
						font-weight: 500;
						color: rgba(0, 0, 0, 1);
					}

					.cloud {
						box-sizing: border-box;
						margin-top: 12rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						font-weight: 700;
						color: rgba(253, 246, 230, 1);
						width: 140rpx;
						height: 36rpx;
						opacity: 1;
						border-radius: 8rpx;
						background: rgba(212, 48, 48, 1);
					}

					.district {
						border-radius: 8rpx;
						width: 140rpx;
						height: 36rpx;
						box-sizing: border-box;
						margin-top: 12rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(49, 48, 56, 1);
						font-size: 20rpx;
						font-weight: 600;
						letter-spacing: 0rpx;
						line-height: 28.74rpx;
						color: rgba(208, 165, 89, 1);
						text-align: left;
						vertical-align: top;
					}



				}
			}

			.storeNum {


				.numContent {

					display: flex;
					justify-content: flex-end;
					align-items: center;

					.num {
						font-size: 52rpx;
						font-weight: 500;
					}
				}

				.desc {
					font-weight: 300;
					font-size: 24rpx;
				}
			}
		}

		//补货中心或者提货记录的导航区
		.goodsOperate {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 100rpx;
			overflow-x: hidden;

			.operateItem {
				z-index: 99999;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;

				.iconContent {

					box-sizing: border-box;
					width: 65rpx;
					height: 65rpx;
					margin-bottom: 12rpx;
				}

				.deliverRecord {
					background: url('/static/my/warehouse_icon_take_default@2x.png.png');
					background-size: cover;
				}

				.replenRecord {
					background: url('/static/my/warehouse_icon_order_default@2x.png.png');
					background-size: cover;
				}

				.replenCenter {
					background: url('/static/my/warehouse_icon_addcommodity_default@2x.png.png');
					background-size: cover;
				}



				.textDesc {
					font-weight: 400;
					font-size: 24rpx;
				}
			}
		}



		//无商品提示文字
		.empty {
			flex-direction: column;
			left: 216rpx;
			bottom: 685rpx;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(116, 116, 116, 1);
			overflow-x: hidden;
		}


		.goodPurchaseArea {

			// 商品区域
			z-index: -1;
			box-sizing: border-box;
			// position: absolute;
			bottom: 0;
			width: 750rpx;
			// height: 650rpx;
			z-index: 99999;
			opacity: 1;
			border-radius: 30rpx 30rpx, 0rpx, 0rpx;
			background: rgba(235, 236, 237, 1);
			overflow-x: hidden;


			.goodsList,
			.replishList {

				// 商品列表
				box-sizing: border-box;
				position: absolute;
				bottom: 176rpx;
				left: 28rpx;
				height: 950rpx;
				display: flex;
				flex-direction: column;
				padding-top: 20rpx;
				align-items: center;
				overflow: auto;
				

				.goodItem {
					// 商品项
				    
					box-sizing: border-box;
					width: 694rpx;
					height: 226rpx;
					opacity: 1;
					border-radius: 14rpx;
					margin-bottom: 20rpx;
					background: rgba(255, 255, 255, 1);
					display: flex;
					padding-bottom: 30rpx;
					padding-right: 23rpx;
					position: relative;
					box-sizing: border-box;
				
					.goodImage {
						// 商品图片
				
						margin-top: 14rpx;
						margin-left: 14rpx;
						box-sizing: border-box;
						width: 178rpx;
						height: 178rpx;
						opacity: 1;
						border-radius: 8rpx;
				
						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
				
					.goodDesc {
						// 商品描述区域
						margin-left: 26rpx;
						margin-top: 10rpx;
				
				
						.goodName {
							
							// 商品名称
						
							height: 86rpx;
							box-sizing: border-box;
							font-size: 32rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 46.34rpx;
							color: rgba(0, 0, 0, 1);
						}
				
						.discount {
							// 折扣信息
							
							
							margin-top: 20rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(179, 130, 75, 1);
						}
				
						.priceAndNum {
							// 价格和数量区域
							margin-top: 5rpx;
							display: flex;
							align-items: center;
							flex-direction: row;
							
						
							.price {
								margin-left: -8rpx;
								padding-left: 0;
								
								display: flex;
								flex-direction: row;
								align-items: center;
				
								// 价格区域
				
								.nowPrice {
									// 现价
									box-sizing: border-box;
									height: 54rpx;
									font-size: 36rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 52.12rpx;
									color: rgba(212, 48, 48, 1);
									text-align: left;
									vertical-align: top;
									overflow: hidden;
									text-overflow: ellipsis;
								}
				
								.prePrice {
									// 原价
									margin-left: 15rpx;
									font-size: 24rpx;
									font-weight: 400;
									letter-spacing: 0rpx;
									line-height: 34.76rpx;
									text-decoration-line: line-through;
									color: rgba(167, 167, 167, 1);
				
								}
							}
				
							.steeper {
								// 数量调节器区域
								position: absolute;
								bottom: 25rpx;
								right: 23rpx;
								box-sizing: border-box;
				
				
								.goodsQuantity {
									width: 128rpx;
									height: 30rpx;
									opacity: 1;
									border-radius: 6rpx;
									background: rgba(212, 48, 48, 1);
									font-size: 20rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 28.96rpx;
									color: rgba(255, 255, 255, 1);
									display: flex;
									justify-content: center;
									align-items: center;
								}
				
								.specitionSelect {
									margin-top: 4rpx;
									box-sizing: border-box;
									width: 128rpx;
									height: 44rpx;
									opacity: 1;
									border-radius: 6rpx;
									background: rgba(223, 161, 60, 1);
									font-size: 24rpx;
									font-weight: 500;
									letter-spacing: 0rpx;
									line-height: 34.76rpx;
									color: rgba(255, 255, 255, 1);
									display: flex;
									justify-content: center;
									align-items: center;
				
								}
				
				
								// 进货清单的进步器
								.steeperOperate {
									border: solid;
									width: 162rpx;
									height: 32rpx;
				
								}
				
				
				
							}
						}
				
						.specific {
							margin-top: 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 34.76rpx;
							color: rgba(85, 85, 87, 1);
						}
					}
				}
							

			}

			.goodsList {
				height: calc(100vh - 680rpx);
				z-index: 99999;
			}

			.replishListArea {

				z-index: 99999999999999;
				box-sizing: border-box;
				margin-bottom: 0;
				position: absolute;
				bottom: 176rpx;
				height: 920rpx;
				width: 100%;
				border-radius: 14rpx;
				background: rgba(255, 255, 255, 1);
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {
					z-index: 99999999999999;
					box-sizing: border-box;
					margin-top: 14rpx;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 38rpx;
					color: rgba(0, 0, 0, 1);
					text-align: right;
					vertical-align: top;

				}

				.delete {

					z-index: 999999999999999;
					position: absolute;
					top: 14rpx;
					right: 28rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.icon {
						width: 32rpx;
						height: 32rpx;
						box-sizing: border-box;
						background: url('/static/cart/address_icon_del_default@2px.png.png');
						background-size: cover;
					}

					.textDesc {
						font-size: 26rpx;
						font-weight: 400;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(85, 85, 87, 1);
					}
				}

				.empty {
					position: absolute;
					top: 358rpx;
					width: 288rpx;
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 36rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 38rpx;
					color: rgba(167, 167, 167, 1);
				}

				.replishList {
					position: absolute;
					bottom: 0;
					height: 90%;
					overflow: scroll;
					z-index: 999999999999;

				}

			}

			.orderFooter {
				// 订单底部区域
				z-index: 999999999999;
				box-sizing: border-box;
				position: absolute;
				bottom: 0;
				width: 750rpx;
				height: 176rpx;
				opacity: 1;
				background: rgba(255, 255, 255, 1);


				.title {
					// 标题区域
					position: absolute;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					top: 28rpx;
					left: 24rpx;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 46.34rpx;
					color: rgba(0, 0, 0, 1);

					.icon {
						box-sizing: border-box;
						width: 48rpx;
						height: 48rpx;

						background-size: cover;

					}

					.up {
						background: url('/static/my/icon_arrow_chevron-up(1).jpg');
						background-size: cover;
					}

					.down {
						background: url('/static/my/icon_arrow_chevron-down(1).jpg');
						background-size: cover;
					}

				}

				.totalPrice {
					// 总价
					position: absolute;
					right: 278rpx;
					top: 24rpx;
					font-size: 36rpx;
					font-weight: 700;
					letter-spacing: 0rpx;
					line-height: 52.12rpx;
					color: rgba(212, 48, 48, 1);

				}



				.confirmButton {
					// 提交订单按钮
					box-sizing: border-box;
					position: absolute;
					left: 490rpx;
					top: 14rpx;
					width: 230rpx;
					height: 74rpx;
					opacity: 1;
					border-radius: 26rpx;
					background: rgba(212, 48, 48, 1);
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(255, 255, 255, 1);


				}
			}
		}


		// 商品卡片容器样式
		.specificCard {
			box-sizing: border-box;
			z-index: 9999999;
			position: absolute;
			left: 28rpx;
			top: 500rpx;
			width: 694rpx;
			height: 526rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;
			padding-left: 30rpx;


			.goodName {
				// 商品名称样式
				margin-top: 30rpx;
				font-size: 36rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 38rpx;
				color: rgba(0, 0, 0, 1);
			}

			.specifiBox {
				// 规格按钮组样式

				margin-top: 60rpx;
				height: 250rpx;
				overflow: auto;

				.title {
					// 规格标题样式
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 38rpx;
					color: rgba(0, 0, 0, 1);
				}

				.speciBtns {
					// 规格按钮样式
					box-sizing: border-box;


					.btnItem {
						// 单个规格按钮样式
						margin-top: 14rpx;
						box-sizing: border-box;
						height: 50rpx;
						min-width: 284rpx;
						max-width: 300rpx;
						opacity: 1;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 38rpx;

					}

					.unSelected {
						background: rgba(229, 229, 229, 1);
						color: rgba(30, 30, 32, 1);
					}

					.selected {
						background: rgba(223, 161, 60, 1);
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.footOperate {
				position: absolute;
				bottom: 36rpx;
				left: 30rpx;
				width: calc(100% - 60rpx);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				// 底部操作按钮样式

				.totalPrice {
					// 小计样式
					display: flex;
					align-items: center;

					.title {

						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(0, 0, 0, 1);
					}

					.Price {
						// 小计价格样式
						font-size: 44rpx;
						font-weight: 700;
						letter-spacing: 0rpx;
						line-height: 38rpx;
						color: rgba(212, 48, 48, 1);
					}
				}

				.addToList {
					// 加入进货清单按钮样式
					width: 176rpx;
					height: 48rpx;
					opacity: 1;
					border-radius: 6rpx;
					background: rgba(223, 161, 60, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 500;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(255, 255, 255, 1);

				}
			}
		}


	}
</style>